<template>
  <div>
    <div class="container flex content">

      <div class="left">
        <Card>
          <el-page-header @back="goBack" title="首页">
            <div slot="content" class="page-title" v-text="topic.title"></div>
          </el-page-header>
        </Card>
        <Card class="topic">
          <div class="title">
            <div class="name">
              <h2 v-text="topic.title"></h2>
            </div>
          </div>
          <div class="pieces flex">
            <div class="left">
              <UserInfo :user="topic.user"/>
              <span class="time" v-text="topic.lastReplied">8分钟前</span>
            </div>
            <div class="right">
              <div class="view"><i class="el-icon-view"></i>{{ topic.view }}</div>
              <div class="comment"><i class="el-icon-chat-dot-round"></i>{{ topic.reply }}</div>
            </div>
          </div>
          <div v-if="hasPermission" class="action">
            <el-link :disabled="loading" v-if="isStaff" type="primary" @click="top()"
                     v-text="topic.isTop?'取消置顶':'置顶'"></el-link>
            <nuxt-link :to="{name:'topic-edit',params:{id:topic.id}}" class="el-link el-link--success is-underline">编辑
            </nuxt-link>
            <el-link :disabled="loading" type="danger" @click="del()">删除</el-link>
          </div>
          <div class="article" ref="content" v-html="topic.contentRendered">
            内容区域
          </div>
          <div class="donate">
            <el-button type="danger" icon="el-icon-present" circle @click="showDonate()"></el-button>
            <div class="tips">打赏作者</div>
          </div>
        </Card>
        <AskUserInfo :user="topic.askUserInfo" v-if="topic.askUserInfo"/>

        <Card :title="'评论('+topic.reply+')'">
          <Comment :targetType="0" :targetId="parseInt($route.params.id)" @login="login()"></Comment>
        </Card>
      </div>
      <div class="right">
        <Right>
          <profile-info :show-margin="false" slot="header" :user="topic.user"/>
          <div slot="verify"></div>
        </Right>
      </div>
    </div>
    <p-dialog :visible="visible" @close="visible = false">
      <div v-if="topic.user.donate">
        <h2>扫码打赏作者</h2>
        <el-alert style="margin-bottom: 10px;" :closable="false" type="success" v-if="topic.user.donateDescription">
          {{ topic.user.donateDescription }}
        </el-alert>
        <img class="donate-img" :src="topic.user.donate" alt="扫码打赏"/>
      </div>
      <el-empty v-else description="该用户没有设置收款码"></el-empty>
    </p-dialog>
    <elImageViewer
      v-if="showViewer"
      :initial-index="nowPickImg"
      :on-close="onClose"
      :url-list="srcList"/>
  </div>
</template>

<script>
import api from "~/utils/api";
import elImageViewer from 'element-ui/packages/image/src/image-viewer';

export default {
  name: "topic",
  layout: 'base',
  transition: 'fade',
  components: {elImageViewer},
  data() {
    return {
      topic: null,
      loading: false,
      visible: false,
      srcList: [],
      showViewer: false,
      nowPickImg: 0,
    }
  },
  watch: {
    showViewer(val) {
      if (process.browser) {
        if (val) {
          document.body.style.overflow = 'hidden';
        } else {
          document.body.style.removeProperty('overflow');
        }
      }
    }
  },
  computed: {
    isStaff() {
      return this.$store.state.user && this.$store.state.user.isStaff;
    },
    hasPermission() {
      if (this.$store.state.user) {
        return this.$store.state.user.id === this.topic.user.id || this.$store.state.user.isStaff;
      }
      return false;
    }
  },
  methods: {
    goBack() {
      this.$router.push({
        name: 'index'
      });
    },
    onClose() {
      this.showViewer = false;
    },
    showDonate() {
      this.visible = true;
    },
    login() {
      this.$parent.$parent.showLogin();
    },
    top() {
      let self = this;
      self.loading = true;
      api.topicTop(this.$route.params.id).then(res => {
        this.$message.success(res.msg);
        this.topic.isTop = !this.topic.isTop;
      }).finally(() => self.loading = false);
    },
    del() {
      this.$confirm('确定删除该帖子吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        api.topicDelete(this.$route.params.id).then(res => {
          this.$message.success(res.msg);
          this.$router.push({name: 'index'});
        }).finally(() => this.loading = false);
      })
    }
  },
  head() {
    return {
      title: this.topic.title + "-Simple社区",
      meta: [
        {hid: 'description', name: 'description', content: this.topic.subject.replace(/\r|\n|\t/g, "")},
        {name: 'keywords', content: 'SimpleUI、SimplePro、Django Admin主题、Django SimpleUI'},
        {name: 'renderer', content: 'webkit'},
      ]
    }
  },
  async asyncData({params}) {
    let topic = await api.getTopicById(params.id);
    return {
      topic
    }
  },
  mounted() {
    if (process.browser) {
      this.$nextTick(() => {
        let self = this;
        if (!this.$refs.content.querySelectorAll) {
          return;
        }
        let imgs = this.$refs.content.querySelectorAll("img");
        let urls = [];
        imgs.forEach((img, index) => {
          urls.push(img.src);
          img.style.cursor = "pointer";

          img.addEventListener('click', () => {
            self.showViewer = true;
            self.nowPickImg = index;
          });
        });
        self.srcList = urls;
      })
    }

  }
}
</script>

<style scoped lang="less">
.topic {
  //max-width: 820px;
  overflow: auto;
}

.title {
  display: flex;
  margin: 10px auto;

  .name {
    h2 {
      font-size: 22px;
      margin-top: 0px;
      padding-top: 0px;
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
    }

    a {
      font-size: 16px;
      font-weight: 400;
    }
  }
}

.pieces {
  margin-top: 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
  }

  .name {
    color: var(--post-color);

    &:hover {
      color: var(--primary);
    }
  }

  .badge {
    background-color: var(--bg);
    width: 3px;
    height: 3px;
    display: inline-block;
    border-radius: 50%;
  }

  .tag {
    color: #45d1b2;
    background-color: rgb(233, 250, 246);
    font-size: 14px;
    line-height: 23px;
    text-align: center;
    height: 24px;
    display: inline-block;
    border-radius: 2px;
    padding: 0px 5px;
  }

  .time {
    color: #aaa;
  }

  .view, .comment {
    color: #aaa;
    font-size: 14px;
    display: inline-block;
    //width: 50px;

    i {
      margin-right: 10px;
    }
  }

  .right {
    flex: 0 0 120px;
  }
}

.action {
  padding: 10px;
}

.donate {
  margin: 20px 0;
  text-align: center;

  .tips {
    margin-top: 10px;
    font-size: 12px;
  }
}

.donate-img {
  max-width: 500px;
  max-height: 300px;
}

.page-title {
  color: var(--color);
}
</style>
